<template>
    <view class="page">
        <scroll-view scroll-x class="bg-white nav" scroll-with-animation>
            <view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
                <view class="cu-item" v-for="(item, index) in list"
                    :key="index" :id="index" @touchstart="getCur" @touchend="setCur">
                    {{ item.name }}
                </view>
            </view>
        </scroll-view>
        <scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-' + list_curr_id"
            :style="[{ height: '800rpx' }]" :scroll-with-animation="true" :enable-back-to-top="true">
            <block v-for="(item, index) in list" :key="index">
                <view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
                    <view class="padding">{{ item.name }}</view>
                    <view class="cu-list menu-avatar no-padding">
                        <view class="cu-cell " v-for="(items, sub_index) in item.sub" :key="sub_index"
                            @click.stop="selectItem(items)">
                            <image class="himg cu-avatar round" v-if="items.img" :src="$imgUrl + items.img"></image>
                            <view class="content">
                                <view class="text-black name">{{ items.ename }} {{ items.name }}</view>
                            </view>
                            <view class="act-box flex align-center justify-center" v-if="act_list.includes(items.id)">
                                <text class="cuIcon cuIcon-check"></text>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
        </scroll-view>

    </view>
</template>


<script setup>
const { proxy } = getCurrentInstance();
const emit = defineEmits(['change']);

const props = defineProps({
    brand_list: {
        type: Array,
        default: []
    },
    act:{
        type: Array,
        default: []
    }
});

const data = reactive({
    act_list: [], // 选中列表
    list_curr_id: '',
    list: [],
    list_cur: '',
})
const {
    act_list,
    list_curr_id,
    list,
    list_cur,
} = toRefs(data)

onMounted(() => {
    data.act_list = props.act || []
    data.list = props.brand_list || []
})


function getCur(e) {
    data.list_cur = data.list[e.target.id].name;
}
function setCur(e) {
    data.list_cur = data.list_cur
}
//滑动选择Item
function tMove(e) {
    let y = e.touches[0].clientY,
        offsettop = data.boxTop

    //判断选择区域,只有在选择区才会生效
    if (y > offsettop) {
        let num = parseInt((y - offsettop) / 20);
        data.list_cur = data.list[num].name
    };
}

//触发全部开始选择
function tStart() {
}

//触发结束选择
function tEnd() {
    data.list_curr_id = data.list_cur
}

function selectItem(item) {
    let i = data.act_list.indexOf(item.id)
    if(i>-1) {
        data.act_list.splice(i, 1)
    } else {
        data.act_list.push(item.id)
    }
   
    emit('change', data.act_list)
}


onShareAppMessage(() => { })
onShareTimeline(() => { })
</script>

<style lang="scss" scoped>
.page {
    height: 800rpx;
    overflow-y: hidden;
}

.indexes {
    position: relative;
}

.indexBar {
    position: fixed;
    right: 0px;
    bottom: 0px;
    padding: 20rpx 0rpx 20rpx 60rpx;
    display: flex;
    align-items: center;
}

.indexBar .indexBar-box {
    width: 60rpx;
    height: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
    border-radius: 10rpx;
}

.indexBar-item {
    width: 60rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #000;
}

movable-view.indexBar-item {
    width: 40rpx;
    height: 40rpx;
    z-index: 9;
    position: relative;
}

movable-view.indexBar-item::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 10rpx;
    height: 20rpx;
    width: 4rpx;
    background-color: #f37b1d;
}

.indexToast {
    position: fixed;
    top: 0;
    right: 80rpx;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100rpx;
    height: 100rpx;
    border-radius: 10rpx;
    margin: auto;
    color: #fff;
    line-height: 100rpx;
    text-align: center;
    font-size: 48rpx;
}

.cu-cell {
    height: 110rpx !important;
    padding-left: 40rpx;
    background-color: #FFF;
    border-bottom: 1px solid #efefef;
    display: flex;
    align-items: center;
    position: relative;
}

.act-box{
    width: 110rpx;
    height: 110rpx;
    position: absolute;
    right: 0;
    top: 0;
    .cuIcon{
        font-weight: bold;
        font-size: 32rpx;
        color: $main_color;
    }
}

.name {
    font-size: 24rpx !important;
}

.cu-avatar {
    margin-right: 30rpx;
}
</style>
